import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_web/app/widget/json_item.dart';
import '../../../../widget/saveJson.dart';
import '../../../../services/screenAdapter.dart';
import '../controllers/interface_controller.dart';

import 'package:get/get.dart';
import 'package:dropdown_button2/dropdown_button2.dart';
import '../../../../models/request_param.dart';

class InterfaceInfoView extends GetView {
  InterfaceInfoView({super.key});
  final InterfaceController controller = Get.find();
  @override
  // 构建标签
  Widget _buildTab(value) {
    return InkWell(
      onTap: () {
        controller.changeInterfaceInfoTabsIndex(value["id"]);
      },
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 24),
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(
              color:
                  value["id"] == controller.currentInterfaceInfoTabIndex.value
                  ? const Color(0xFF1890FF)
                  : Colors.transparent,
              width: ScreenAdapter.width(2),
            ),
          ),
        ),
        child: Text(
          "${value["title"]}",
          style: TextStyle(
            fontWeight: FontWeight.w500,
            fontSize: ScreenAdapter.fontSize(16),
            color: value["id"] == controller.currentInterfaceInfoTabIndex.value
                ? Colors.black
                : const Color(0xFF666666),
          ),
        ),
      ),
    );
  }

  //分类选择下拉框
  Widget _buildDropdown() {
    return DropdownButtonHideUnderline(
      child: DropdownButton2<int>(
        isExpanded: true,
        hint: Text('选择分类'),
        value: controller.selectedValue.value != 0
            ? controller.selectedValue.value
            : null,
        items: controller.leftProjectMenuList.map((item) {
          if (item == null)
            return const DropdownMenuItem<int>(
              value: null,
              child: SizedBox.shrink(),
            );

          final isSelected = item.id == controller.selectedValue.value;
          return DropdownMenuItem<int>(
            value: item.id,
            child: Container(
              width: double.infinity,
              padding: const EdgeInsets.symmetric(vertical: 8),
              decoration: BoxDecoration(borderRadius: BorderRadius.circular(4)),
              child: Text(
                item.name ?? '',
                style: TextStyle(
                  fontWeight: isSelected ? FontWeight.w900 : FontWeight.normal,
                ),
              ),
            ),
          );
        }).toList(),
        onChanged: (value) {
          controller.selectedValue.value = value ?? 0;
        },
        buttonStyleData: ButtonStyleData(
          height: ScreenAdapter.height(56),
          width: double.infinity,
          padding: EdgeInsets.symmetric(horizontal: 16),
          decoration: BoxDecoration(borderRadius: BorderRadius.circular(8)),
          elevation: 0,
        ),
        menuItemStyleData: MenuItemStyleData(height: ScreenAdapter.height(50)),
        dropdownStyleData: DropdownStyleData(
          maxHeight: ScreenAdapter.height(200),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            color: Colors.white,
          ),
        ),
      ),
    );
  }

  //接口请求方式下拉框

  Widget _buildMethodDropdown() {
    return DropdownButtonHideUnderline(
      child: DropdownButton2<int>(
        isExpanded: true,
        hint: Text('选择接口请求方式'),
        value: controller.selectedMethodValue.value, // 当值为0时设为null
        items: controller.methodList.map((item) {
          final isSelected = item['id'] == controller.selectedMethodValue.value;
          return DropdownMenuItem<int>(
            value: item['id'],
            child: Container(
              width: double.infinity,
              padding: const EdgeInsets.symmetric(vertical: 8),
              decoration: BoxDecoration(borderRadius: BorderRadius.circular(4)),
              child: Text(
                item['title'] ?? '',
                style: TextStyle(
                  fontWeight: isSelected ? FontWeight.w900 : FontWeight.normal,
                ),
              ),
            ),
          );
        }).toList(),
        onChanged: (value) {
          controller.selectedMethodValue.value = value ?? 1;
        },
        buttonStyleData: ButtonStyleData(
          height: ScreenAdapter.height(56),
          width: double.infinity,
          padding: EdgeInsets.symmetric(horizontal: 10),
          decoration: BoxDecoration(borderRadius: BorderRadius.circular(8)),
          elevation: 0,
        ),
        menuItemStyleData: MenuItemStyleData(height: ScreenAdapter.height(40)),
        dropdownStyleData: DropdownStyleData(
          maxHeight: ScreenAdapter.height(200),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            color: Colors.white,
          ),
        ),
      ),
    );
  }

  // 构建接口详情标签
  Widget _buildInterfaceInfoTab() {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        children: [
          _buildBasicInfoSection(),
          // 请求参数区域
          controller.interfaceInfo.value.header?.isNotEmpty == true
              ? Column(
                  children: [
                    SizedBox(height: ScreenAdapter.height(20)),
                    _buildRequestHeadersSection(),
                  ],
                )
              : SizedBox.shrink(),

          controller.interfaceInfo.value.query?.isNotEmpty == true
              ? Column(
                  children: [
                    SizedBox(height: ScreenAdapter.height(20)),
                    _buildRequestQuerySection(),
                  ],
                )
              : SizedBox.shrink(),
          controller.interfaceInfo.value.body?.isNotEmpty == true
              ? Column(
                  children: [
                    SizedBox(height: ScreenAdapter.height(20)),
                    _buildRequestBodySection(),
                  ],
                )
              : SizedBox.shrink(),
          SizedBox(height: ScreenAdapter.height(20)),

          // 返回数据区域
          _buildResponseDataSection(),
        ],
      ),
    );
  }

  // 构建基础信息区域
  Widget _buildBasicInfoSection() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: const Color(0xFFE6E9F0)),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.03),
            blurRadius: 6,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      padding: EdgeInsets.all(ScreenAdapter.width(16.0)),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '基本信息',
            style: TextStyle(
              fontSize: ScreenAdapter.fontSize(16),
              fontWeight: FontWeight.bold,
              color: Color(0xFF333333),
            ),
          ),
          SizedBox(height: ScreenAdapter.height(12)),
          _buildInfoRow(
            '创建人',
            controller.interfaceInfo.value.authorStr ?? '未填写',
          ),
          _buildInfoRow('更新时间', '2025-08-08 10:00:00'),

          SizedBox(height: ScreenAdapter.height(12)),
          Text(
            '接口路径',
            style: TextStyle(
              fontSize: ScreenAdapter.fontSize(16),
              fontWeight: FontWeight.bold,
              color: Color(0xFF333333),
            ),
          ),
          SizedBox(height: ScreenAdapter.height(12)),
          Container(
            padding: EdgeInsets.all(ScreenAdapter.width(12)),
            decoration: BoxDecoration(
              color: const Color(0xFFF8FAFF),
              borderRadius: BorderRadius.circular(8),
              border: Border.all(color: const Color(0xFFE6E9F0)),
            ),
            child: Row(
              children: [
                Container(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 8,
                    vertical: 2,
                  ),
                  decoration: BoxDecoration(
                    color: const Color(0xFF4A6EE0).withOpacity(0.1),
                    borderRadius: BorderRadius.circular(4),
                  ),
                  child: Text(
                    '${controller.interfaceInfo.value.methodStr}',
                    style: const TextStyle(
                      color: Color(0xFF4A6EE0),
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                SizedBox(width: ScreenAdapter.width(12)),
                Expanded(
                  child: Text(
                    '${controller.interfaceInfo.value.path}',
                    style: const TextStyle(
                      color: Color(0xFF333333),
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.copy, size: ScreenAdapter.fontSize(18)),
                  onPressed: () {
                    Clipboard.setData(
                      ClipboardData(
                        text: '${controller.interfaceInfo.value.path}',
                      ),
                    );
                  },
                  color: const Color(0xFF4A6EE0),
                ),
              ],
            ),
          ),
          // const SizedBox(height: 16),
          // const Text(
          //   'Mock地址',
          //   style: TextStyle(
          //     fontSize: 16,
          //     fontWeight: FontWeight.bold,
          //     color: Color(0xFF333333),
          //   ),
          // ),
          // const SizedBox(height: 12),
          // Container(
          //   padding: const EdgeInsets.all(12),
          //   decoration: BoxDecoration(
          //     color: const Color(0xFFF8FAFF),
          //     borderRadius: BorderRadius.circular(8),
          //     border: Border.all(color: const Color(0xFFE6E9F0)),
          //   ),
          //   child: Row(
          //     children: [
          //       const Icon(Icons.link, color: Color(0xFF4A6EE0), size: 18),
          //       const SizedBox(width: 12),
          //       Expanded(
          //         child: Text(
          //           'https://www.baidu.com',
          //           style: const TextStyle(
          //             color: Color(0xFF4A6EE0),
          //             fontWeight: FontWeight.w500,
          //           ),
          //         ),
          //       ),
          //       IconButton(
          //         icon: const Icon(Icons.open_in_new, size: 18),
          //         onPressed: () {
          //         },
          //         color: const Color(0xFF4A6EE0),
          //       ),
          //     ],
          //   ),
          // ),
        ],
      ),
    );
  }

  Widget _buildInfoRow(String label, String value) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            width: ScreenAdapter.width(80),
            child: Text(
              label,
              style: const TextStyle(
                color: Color(0xFF666666),
                fontWeight: FontWeight.w500,
              ),
            ),
          ),
          SizedBox(width: ScreenAdapter.width(16)),
          Expanded(
            child: Text(
              value.isNotEmpty ? value : '未填写',
              style: TextStyle(
                color: value.isNotEmpty
                    ? const Color(0xFF333333)
                    : const Color(0xFF999999),
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 请求参数区域
  Widget _buildRequestHeadersSection() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: const Color(0xFFE6E9F0)),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.03),
            blurRadius: 6,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      padding: EdgeInsets.all(ScreenAdapter.width(16.0)),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '请求参数Headers',
            style: TextStyle(
              fontSize: ScreenAdapter.fontSize(16),
              fontWeight: FontWeight.bold,
              color: Color(0xFF333333),
            ),
          ),
          SizedBox(height: ScreenAdapter.height(12)),
          Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8),
              border: Border.all(color: const Color(0xFFE6E9F0)),
            ),
            child: Column(
              children: [
                // 表头
                Container(
                  padding: const EdgeInsets.symmetric(
                    vertical: 12,
                    horizontal: 16,
                  ),
                  decoration: const BoxDecoration(
                    color: Color(0xFFF8FAFF),
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(8),
                      topRight: Radius.circular(8),
                    ),
                  ),
                  child: const Row(
                    children: [
                      Expanded(
                        flex: 2,
                        child: Text(
                          '请求参数名称',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                      Expanded(
                        flex: 2,
                        child: Text(
                          '参数值',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                      Expanded(
                        flex: 4,
                        child: Text(
                          '备注',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                    ],
                  ),
                ),
                // 表格内容
                ListView.separated(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  padding: EdgeInsets.zero,
                  itemCount: controller.interfaceInfo.value.header?.length ?? 0,
                  separatorBuilder: (context, index) =>
                      const Divider(height: 1, indent: 16),
                  itemBuilder: (context, index) {
                    final data = controller.interfaceInfo.value.header![index];
                    return Padding(
                      padding: const EdgeInsets.symmetric(
                        vertical: 12,
                        horizontal: 16,
                      ),
                      child: Row(
                        children: [
                          Expanded(
                            flex: 2,
                            child: Text(
                              data?.fieldName ?? '',
                              style: const TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Color(0xFF333333),
                              ),
                            ),
                          ),
                          Expanded(
                            flex: 2,
                            child: Container(
                              padding: const EdgeInsets.symmetric(
                                horizontal: 6,
                                vertical: 2,
                              ),
                              decoration: BoxDecoration(
                                color: const Color(0xFFE6F4FF),
                                borderRadius: BorderRadius.circular(4),
                              ),
                              child: SelectableText(
                                data?.value ?? '',
                                style: const TextStyle(
                                  color: Color(0xFF1677FF),
                                ),
                              ),
                            ),
                          ),
                          Expanded(
                            flex: 4,
                            child: Text(
                              data?.remark ?? '无备注',
                              style: const TextStyle(color: Color(0xFF666666)),
                            ),
                          ),
                        ],
                      ),
                    );
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // 构建请求参数区域
  Widget _buildRequestQuerySection() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: const Color(0xFFE6E9F0)),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.03),
            blurRadius: 6,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      padding: EdgeInsets.all(ScreenAdapter.width(16.0)),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '请求参数Query',
            style: TextStyle(
              fontSize: ScreenAdapter.fontSize(16),
              fontWeight: FontWeight.bold,
              color: Color(0xFF333333),
            ),
          ),
          SizedBox(height: ScreenAdapter.height(12)),
          Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8),
              border: Border.all(color: const Color(0xFFE6E9F0)),
            ),
            child: Column(
              children: [
                // 表头
                Container(
                  padding: const EdgeInsets.symmetric(
                    vertical: 12,
                    horizontal: 16,
                  ),
                  decoration: const BoxDecoration(
                    color: Color(0xFFF8FAFF),
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(8),
                      topRight: Radius.circular(8),
                    ),
                  ),
                  child: const Row(
                    children: [
                      Expanded(
                        flex: 2,
                        child: Text(
                          '请求参数名称',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                      Expanded(
                        flex: 1,
                        child: Text(
                          '必需',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                      Expanded(
                        flex: 1,
                        child: Text(
                          '示例',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                      Expanded(
                        flex: 4,
                        child: Text(
                          '备注',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                    ],
                  ),
                ),
                // 表格内容
                ListView.separated(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  padding: EdgeInsets.zero,
                  itemCount: controller.interfaceInfo.value.query?.length ?? 0,
                  separatorBuilder: (context, index) =>
                      const Divider(height: 1, indent: 16),
                  itemBuilder: (context, index) {
                    final data = controller.interfaceInfo.value.query?[index];
                    return Padding(
                      padding: const EdgeInsets.symmetric(
                        vertical: 12,
                        horizontal: 16,
                      ),
                      child: Row(
                        children: [
                          Expanded(
                            flex: 2,
                            child: Text(
                              data?.fieldName ?? '',
                              style: const TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Color(0xFF333333),
                              ),
                            ),
                          ),
                          Expanded(
                            flex: 1,
                            child: Text(
                              data?.isRequired == '是' ? '是' : '否',
                              style: TextStyle(
                                color: data?.isRequired == '是'
                                    ? const Color(0xFF1677FF)
                                    : const Color(0xFF999999),
                              ),
                            ),
                          ),
                          Expanded(
                            flex: 1,
                            child: Text(
                              data?.exampleValue?.isNotEmpty == true
                                  ? data!.exampleValue!
                                  : '无',
                              style: const TextStyle(color: Color(0xFF666666)),
                            ),
                          ),
                          Expanded(
                            flex: 4,
                            child: Text(
                              data?.remark ?? '无备注',
                              style: const TextStyle(color: Color(0xFF666666)),
                            ),
                          ),
                        ],
                      ),
                    );
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // 构建请求参数区域
  Widget _buildRequestBodySection() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: const Color(0xFFE6E9F0)),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.03),
            blurRadius: 6,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      padding: EdgeInsets.all(ScreenAdapter.width(16.0)),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '请求参数Body',
            style: TextStyle(
              fontSize: ScreenAdapter.fontSize(16),
              fontWeight: FontWeight.bold,
              color: Color(0xFF333333),
            ),
          ),
          SizedBox(height: ScreenAdapter.height(12)),
          Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8),
              border: Border.all(color: const Color(0xFFE6E9F0)),
            ),
            child: Column(
              children: [
                // 表头
                Container(
                  padding: const EdgeInsets.symmetric(
                    vertical: 12,
                    horizontal: 16,
                  ),
                  decoration: const BoxDecoration(
                    color: Color(0xFFF8FAFF),
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(8),
                      topRight: Radius.circular(8),
                    ),
                  ),
                  child: const Row(
                    children: [
                      Expanded(
                        flex: 2,
                        child: Text(
                          '请求参数名称',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                      Expanded(
                        flex: 2,
                        child: Text(
                          '参数类型',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                      Expanded(
                        flex: 1,
                        child: Text(
                          '必需',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                      Expanded(
                        flex: 1,
                        child: Text(
                          '示例',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                      Expanded(
                        flex: 4,
                        child: Text(
                          '备注',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                    ],
                  ),
                ),
                // 表格内容
                ListView.separated(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  padding: EdgeInsets.zero,
                  itemCount: controller.interfaceInfo.value.body?.length ?? 0,
                  separatorBuilder: (context, index) =>
                      const Divider(height: 1, indent: 16),
                  itemBuilder: (context, index) {
                    final data = controller.interfaceInfo.value.body?[index];
                    return Padding(
                      padding: const EdgeInsets.symmetric(
                        vertical: 12,
                        horizontal: 16,
                      ),
                      child: Row(
                        children: [
                          Expanded(
                            flex: 2,
                            child: Text(
                              data?.fieldName ?? '',
                              style: const TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Color(0xFF333333),
                              ),
                            ),
                          ),
                          Expanded(
                            flex: 2,
                            child: Text(
                              data?.type ?? '',
                              style: const TextStyle(
                                fontWeight: FontWeight.bold,
                                color: Color(0xFF333333),
                              ),
                            ),
                          ),
                          Expanded(
                            flex: 1,
                            child: Text(
                              data?.isRequired == '是' ? '是' : '否',
                              style: TextStyle(
                                color: data?.isRequired == '是'
                                    ? const Color(0xFF1677FF)
                                    : const Color(0xFF999999),
                              ),
                            ),
                          ),
                          Expanded(
                            flex: 1,
                            child: Text(
                              data?.exampleValue?.isNotEmpty == true
                                  ? data!.exampleValue!
                                  : '无',
                              style: const TextStyle(color: Color(0xFF666666)),
                            ),
                          ),
                          Expanded(
                            flex: 4,
                            child: Text(
                              data?.remark ?? '无备注',
                              style: const TextStyle(color: Color(0xFF666666)),
                            ),
                          ),
                        ],
                      ),
                    );
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // 构建返回数据区域
  Widget _buildResponseDataSection() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: const Color(0xFFE6E9F0)),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.03),
            blurRadius: 6,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      padding: EdgeInsets.all(ScreenAdapter.width(16.0)),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '返回数据',
            style: TextStyle(
              fontSize: ScreenAdapter.fontSize(16),
              fontWeight: FontWeight.bold,
              color: Color(0xFF333333),
            ),
          ),
          SizedBox(height: ScreenAdapter.height(16)),
          Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8),
              border: Border.all(color: const Color(0xFFE6E9F0)),
            ),
            child: Column(
              children: [
                // 表头
                Container(
                  padding: const EdgeInsets.symmetric(
                    vertical: 12,
                    horizontal: 16,
                  ),
                  decoration: const BoxDecoration(
                    color: Color(0xFFF8FAFF),
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(8),
                      topRight: Radius.circular(8),
                    ),
                  ),
                  child: const Row(
                    children: [
                      Expanded(
                        flex: 3,
                        child: Text(
                          '名称',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                      Expanded(
                        flex: 1,
                        child: Text(
                          '类型',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                      Expanded(
                        flex: 1,
                        child: Text(
                          '必需',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                      Expanded(
                        flex: 3,
                        child: Text(
                          '备注',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                    ],
                  ),
                ),
                // 表格内容
                ListView.separated(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  padding: EdgeInsets.zero,
                  itemCount: controller.jsonList.length ?? 0,
                  separatorBuilder: (context, index) =>
                      const Divider(height: 1, indent: 16),
                  itemBuilder: (context, index) {
                    final item = controller.jsonList[index];
                    final node = item.item;
                    final hasChildren = node.children != null && node.children!.isNotEmpty;
                    return Container(
                      padding: const EdgeInsets.symmetric(
                        vertical: 12,
                        horizontal: 12,
                      ),
                      decoration: BoxDecoration(
                        border: Border(
                          bottom: BorderSide(color: Colors.grey[300]!),
                        ),
                      ),
                      child: Row(
                        children: [
                          //节点名称
                          Expanded(
                            flex: 3,
                            child: Row(
                              children: [
                                // 缩进控制
                                SizedBox(width: item.level * 24.0),
                                // 展开/折叠图标
                                if (hasChildren)
                                  GestureDetector(
                                    onTap: () => controller.toggleExpand(index),
                                    child: Icon(
                                      item.isExpanded
                                          ? Icons.expand_more
                                          : Icons.chevron_right,
                                      size: 20,
                                    ),
                                  )
                                else
                                  const SizedBox(width: 20),
                                // 节点名称
                                Text(
                                  node.name ?? '',
                                  style: TextStyle(
                                    fontWeight: hasChildren
                                        ? FontWeight.bold
                                        : FontWeight.normal,
                                  ),
                                ),
                              ],
                            ),
                          ),

                          // 类型
                          Expanded(
                            flex: 1,
                            child: Text(node.type?.toString() ?? ''),
                          ),
                          // 是否必须
                          Expanded(
                            flex: 1,
                            child: Text(node.isRequired?.toString() ?? ''),
                          ),

                          // 状态
                          Expanded(
                            flex: 3,
                            child: Text(node.desc?.toString() ?? '无备注'),
                          ),
                        ],
                      ),
                    );
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // 构建编辑接口标签
  Widget _buildEditInterfaceTab() {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildEditBasicSettings(),
          SizedBox(height: ScreenAdapter.height(24)),
          _buildRequestParameters(),
          SizedBox(height: ScreenAdapter.height(24)),
          _builReturnData(),
          SizedBox(height: ScreenAdapter.height(24)),
          _buildSubmitButton(),
        ],
      ),
    );
  }

  // 构建编辑接口基础设置
  Widget _buildEditBasicSettings() {
    return Card(
      color: Colors.grey[100],
      elevation: 2,
      child: Padding(
        padding: EdgeInsets.all(ScreenAdapter.width(16)),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '基本设置',
              style: TextStyle(
                fontSize: ScreenAdapter.fontSize(18),
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: ScreenAdapter.height(16)),
            Padding(
              padding: EdgeInsets.symmetric(
                horizontal: ScreenAdapter.width(36),
              ),
              child: Row(
                // 设置垂直方向居中对齐
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text("接口名称", style: TextStyle(fontWeight: FontWeight.w500)),
                  SizedBox(width: ScreenAdapter.width(8)),
                  Expanded(
                    child: TextFormField(
                      key: UniqueKey(),
                      onChanged: (value) {
                        controller.editInterfaceName.value = value;
                      },
                      initialValue: controller.editInterfaceName.value,
                      style: TextStyle(fontSize: ScreenAdapter.fontSize(16)),
                      decoration: InputDecoration(
                        hintText: "请输入接口名称",
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                          borderSide: BorderSide(color: Colors.grey[300]!),
                        ),
                        contentPadding: EdgeInsets.symmetric(
                          horizontal: 8,
                          vertical: 2,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(height: ScreenAdapter.height(16)),
            Padding(
              padding: EdgeInsets.symmetric(
                horizontal: ScreenAdapter.width(36),
              ),
              child: Row(
                // 设置垂直方向居中对齐
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text("接口分类", style: TextStyle(fontWeight: FontWeight.w500)),
                  SizedBox(width: ScreenAdapter.width(8)),
                  Expanded(
                    child: Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(8),
                        border: Border.all(color: Colors.grey),
                      ),
                      child: _buildDropdown(),
                    ),
                  ),
                ],
              ),
            ),

            SizedBox(height: ScreenAdapter.height(16)),
            Padding(
              padding: EdgeInsets.symmetric(
                horizontal: ScreenAdapter.width(36),
              ),
              child: Row(
                // 设置垂直方向居中对齐
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Text("接口路径", style: TextStyle(fontWeight: FontWeight.w500)),
                  SizedBox(width: ScreenAdapter.width(8)),
                  Container(
                    width: ScreenAdapter.width(100),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(8),
                      border: Border.all(color: Colors.grey),
                    ),
                    child: _buildMethodDropdown(),
                  ),
                  SizedBox(width: ScreenAdapter.width(8)),
                  Expanded(
                    child: TextFormField(
                      key: UniqueKey(),
                      onChanged: (value) {
                        controller.editInterfacePath.value = value;
                      },
                      initialValue: controller.editInterfacePath.value,
                      style: TextStyle(fontSize: ScreenAdapter.fontSize(16)),
                      decoration: InputDecoration(
                        hintText: "请输入接口路径",
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(8),
                          borderSide: BorderSide(color: Colors.grey[300]!),
                        ),
                        contentPadding: EdgeInsets.symmetric(
                          horizontal: 8,
                          vertical: 2,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 构建接口请求header
  Widget _buildRequestParameters() {
    return Card(
      elevation: 2,
      color: Colors.grey[100],
      child: Padding(
        padding: EdgeInsets.all(ScreenAdapter.width(16)),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '请求参数设置',
              style: TextStyle(
                fontSize: ScreenAdapter.fontSize(18),
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: ScreenAdapter.height(16)),
            Container(
              decoration: BoxDecoration(
                border: Border.all(color: Colors.grey.shade300),
                borderRadius: BorderRadius.circular(4),
              ),
              child: Row(
                children: [
                  _buildTabItem('Body'),
                  _buildTabItem('Query'),
                  _buildTabItem('Headers'),
                ],
              ),
            ),
            SizedBox(height: ScreenAdapter.height(16)),
            // 根据选中的选项卡显示不同的内容
            Obx(() {
              if (controller.selectedRequestParameTab.value == 'Body') {
                return _buildBodyTab();
              } else if (controller.selectedRequestParameTab.value == 'Query') {
                return _buildQueryTab();
              } else {
                return _buildHeadersTab();
              }
            }),
          ],
        ),
      ),
    );
  }

  Widget _buildTabItem(String title) {
    final isSelected = controller.selectedRequestParameTab.value == title;
    return Expanded(
      child: InkWell(
        onTap: () => controller.changeRequestParameTab(title),
        child: Container(
          decoration: BoxDecoration(
            color: isSelected ? Colors.blue.shade50 : null,
            border: isSelected
                ? const Border(bottom: BorderSide(color: Colors.blue, width: 2))
                : null,
          ),
          padding: const EdgeInsets.symmetric(vertical: 12),
          child: Center(
            child: Text(
              title,
              style: TextStyle(
                fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
                color: isSelected ? Colors.blue : Colors.grey,
              ),
            ),
          ),
        ),
      ),
    );
  }

  // 构建Body选项卡内容
  // Body选项卡的内容
  Widget _buildBodyTab() {
    return _buildFormParameters();
  }

  Widget _buildFormParameters() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 动态参数列表
        Obx(() {
          return Column(
            children: [
              for (int i = 0; i < controller.formParams.length; i++)
                _buildFormParamRow(i, controller.formParams[i]),
            ],
          );
        }),

        // 添加参数按钮
        Align(
          alignment: Alignment.centerRight,
          child: TextButton.icon(
            onPressed: () => controller.addInterfaceBodyFormParam(),
            icon: const Icon(Icons.add, size: 18),
            label: const Text('添加参数'),
          ),
        ),
      ],
    );
  }

  Widget _buildFormParamRow(int index, FormParam param) {
    return Padding(
      key: UniqueKey(),
      padding: const EdgeInsets.only(bottom: 12),
      child: Row(
        children: [
          Expanded(
            flex: 3,
            child: TextFormField(
              initialValue: param.fieldName,
              decoration: InputDecoration(
                labelText: '参数名',
                border: const OutlineInputBorder(),
              ),
              onChanged: (value) {
                controller.formParams[index].fieldName = value;
              },
            ),
          ),
          SizedBox(width: ScreenAdapter.width(16)),
          Expanded(
            flex: 1,
            child: DropdownButtonFormField<String>(
              value: param.type,
              decoration: InputDecoration(
                labelText: "选择类型",
                border: OutlineInputBorder(),
                isDense: true,
              ),
              items: ['text', 'file'].map<DropdownMenuItem<String>>((
                String value,
              ) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
              onChanged: (value) {
                controller.formParams[index].type = value!;
              },
            ),
          ),

          SizedBox(width: ScreenAdapter.width(16)),
          Expanded(
            flex: 1,
            child: DropdownButtonFormField<String>(
              value: param.isRequired,
              decoration: InputDecoration(
                labelText: "是否必须",
                border: OutlineInputBorder(),
                isDense: true,
              ),
              items: ['是', '否'].map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
              onChanged: (value) {
                controller.formParams[index].isRequired = value!;
              },
            ),
          ),
          SizedBox(width: ScreenAdapter.width(16)),
          Expanded(
            flex: 3,
            child: TextFormField(
              initialValue: param.exampleValue,
              decoration: InputDecoration(
                labelText: '示例值',
                border: const OutlineInputBorder(),
              ),
              onChanged: (value) {
                controller.formParams[index].exampleValue = value;
              },
            ),
          ),
          SizedBox(width: ScreenAdapter.width(16)),
          Expanded(
            flex: 3,
            child: TextFormField(
              initialValue: param.remark,
              decoration: InputDecoration(
                labelText: '备注',
                border: const OutlineInputBorder(),
                suffixIcon: IconButton(
                  icon: const Icon(Icons.close, size: 18),
                  onPressed: () {
                    controller.removeInterfaceBodyFormParam(index);
                  },
                ),
              ),
              onChanged: (value) {
                controller.formParams[index].remark = value;
              },
            ),
          ),
        ],
      ),
    );
  }

  // Query选项卡的内容
  Widget _buildQueryTab() {
    return Column(
      children: [
        // 动态参数列表
        Obx(() {
          return Column(
            children: [
              for (int i = 0; i < controller.queryParams.length; i++)
                _buildQueryParamRow(i, controller.queryParams[i]),
            ],
          );
        }),
        // 添加参数按钮
        Align(
          alignment: Alignment.centerRight,
          child: TextButton.icon(
            onPressed: () => controller.addInterfaceQueryParam(),
            icon: const Icon(Icons.add, size: 18),
            label: const Text('添加参数'),
          ),
        ),
      ],
    );
  }

  Widget _buildQueryParamRow(int index, QueryParam param) {
    return Padding(
      key: UniqueKey(),
      padding: const EdgeInsets.only(bottom: 12),
      child: Row(
        children: [
          Expanded(
            flex: 3,
            child: TextFormField(
              initialValue: param.fieldName,
              decoration: InputDecoration(
                labelText: '参数名',
                border: const OutlineInputBorder(),
              ),
              onChanged: (value) {
                controller.queryParams[index].fieldName = value;
              },
            ),
          ),

          SizedBox(width: ScreenAdapter.width(16)),
          Expanded(
            flex: 1,
            child: DropdownButtonFormField<String>(
              value: param.isRequired,
              decoration: InputDecoration(
                labelText: "是否必须",
                border: OutlineInputBorder(),
                isDense: true,
              ),
              items: ['是', '否'].map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
              onChanged: (value) {
                controller.queryParams[index].isRequired = value!;
              },
            ),
          ),
          SizedBox(width: ScreenAdapter.width(16)),
          Expanded(
            flex: 3,
            child: TextFormField(
              initialValue: param.exampleValue,
              decoration: InputDecoration(
                labelText: '示例值',
                border: const OutlineInputBorder(),
              ),
              onChanged: (value) {
                controller.queryParams[index].exampleValue = value;
              },
            ),
          ),
          SizedBox(width: ScreenAdapter.width(16)),
          Expanded(
            flex: 3,
            child: TextFormField(
              initialValue: param.remark,
              decoration: InputDecoration(
                labelText: '备注',
                border: const OutlineInputBorder(),
                suffixIcon: IconButton(
                  icon: const Icon(Icons.close, size: 18),
                  onPressed: () {
                    controller.removeInterfaceQueryParam(index);
                  },
                ),
              ),
              onChanged: (value) {
                controller.queryParams[index].remark = value;
              },
            ),
          ),
        ],
      ),
    );
  }

  // Headers选项卡的内容
  Widget _buildHeadersTab() {
    return Column(
      children: [
        // 动态参数列表
        Obx(() {
          return Column(
            children: [
              for (int i = 0; i < controller.headerParams.length; i++)
                _buildHeaderParamRow(i, controller.headerParams[i]),
            ],
          );
        }),
        // 添加参数按钮
        Align(
          alignment: Alignment.centerRight,
          child: TextButton.icon(
            onPressed: () => controller.addInterfaceHeaderParam(),
            icon: const Icon(Icons.add, size: 18),
            label: const Text('添加参数'),
          ),
        ),
      ],
    );
  }

  Widget _buildHeaderParamRow(int index, HeaderParam param) {
    return Padding(
      key: UniqueKey(),
      padding: const EdgeInsets.only(bottom: 12),
      child: Row(
        children: [
          Expanded(
            flex: 3,
            child: TextFormField(
              initialValue: param.fieldName,
              decoration: InputDecoration(
                labelText: '参数名',
                border: const OutlineInputBorder(),
              ),
              onChanged: (value) {
                controller.headerParams[index].fieldName = value;
              },
            ),
          ),

          SizedBox(width: ScreenAdapter.width(16)),
          Expanded(
            flex: 3,
            child: TextFormField(
              initialValue: param.value,
              decoration: InputDecoration(
                labelText: '值',
                border: const OutlineInputBorder(),
              ),
              onChanged: (value) {
                controller.headerParams[index].value = value;
              },
            ),
          ),
          SizedBox(width: ScreenAdapter.width(16)),
          Expanded(
            flex: 3,
            child: TextFormField(
              initialValue: param.remark,
              decoration: InputDecoration(
                labelText: '备注',
                border: const OutlineInputBorder(),
                suffixIcon: IconButton(
                  icon: const Icon(Icons.close, size: 18),
                  onPressed: () {
                    controller.removeInterfaceHeaderParam(index);
                  },
                ),
              ),
              onChanged: (value) {
                controller.headerParams[index].remark = value;
              },
            ),
          ),
        ],
      ),
    );
  }

  // 构建返回数据
  Widget _builReturnData() {
    return Card(
      elevation: 2,
      color: Colors.grey[100],
      child: Padding(
        padding: EdgeInsets.all(ScreenAdapter.width(16)),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              '返回数据',
              style: TextStyle(
                fontSize: ScreenAdapter.fontSize(18),
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: ScreenAdapter.height(16)),
            Container(
              decoration: BoxDecoration(
                border: Border.all(color: Colors.grey.shade300),
                borderRadius: BorderRadius.circular(4),
              ),
              child: Row(
                children: [
                  _buildReturnTabItem('JSON'),
                  _buildReturnTabItem('RAW'),
                ],
              ),
            ),
            SizedBox(height: ScreenAdapter.height(16)),
            // 根据选中的选项卡显示不同的内容
            Obx(() {
              if (controller.selectedJsonTab.value == 'JSON') {
                return _buildReturnJson();
              } else {
                return _buildReturnRaw();
              }
            }),
          ],
        ),
      ),
    );
  }

  Widget _buildReturnTabItem(String title) {
    final isSelected = controller.selectedJsonTab.value == title;
    return Expanded(
      child: InkWell(
        onTap: () => controller.selectedJsonTab.value = title,
        child: Container(
          decoration: BoxDecoration(
            color: isSelected ? Colors.blue.shade50 : null,
            border: isSelected
                ? const Border(bottom: BorderSide(color: Colors.blue, width: 2))
                : null,
          ),
          padding: const EdgeInsets.symmetric(vertical: 12),
          child: Center(
            child: Text(
              title,
              style: TextStyle(
                fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
                color: isSelected ? Colors.blue : Colors.grey,
              ),
            ),
          ),
        ),
      ),
    );
  }

  //返回数据JSON选项卡
  Widget _buildReturnJson() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      // 关键修复：添加这一行，让Column在滚动视图中正确布局
      mainAxisSize: MainAxisSize.min,
      children: [
        // 添加参数按钮
        Align(
          alignment: Alignment.centerLeft,
          child: TextButton.icon(
            onPressed: () {
              Get.dialog(SaveJson());
            },
            icon: const Icon(Icons.add, size: 18),
            label: const Text('添加json参数'),
          ),
        ),

        SizedBox(height: ScreenAdapter.height(20)),
        SizedBox(
          height: ScreenAdapter.height(400), // 可以设置一个合理的固定高度，或者根据需要调整
          child: ListView(
            children: controller.responseFields
                .map((field) => JsonItem(field: field))
                .toList(),
          ),
        ),
      ],
    );
  }

  //返回数据RAW选项卡
  Widget _buildReturnRaw() {
    return Container(
      padding: EdgeInsets.all(ScreenAdapter.width(16)),
      child: TextFormField(
        decoration: InputDecoration(
          labelText: '返回数据',
          border: const OutlineInputBorder(),
        ),
      ),
    );
  }

  //保存接口信息按钮
  Widget _buildSubmitButton() {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          // 保存接口信息
          controller.submitEditInterfaceForm();
        },
        child: Text('保存', style: TextStyle(fontSize: ScreenAdapter.fontSize(18))),
      ),
    );
  }

  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        // 标签栏
        Container(
          color: Colors.white,
          child: Obx(
            () => Row(
              children: controller.interfaceInfoTabList.map((value) {
                return _buildTab(value);
              }).toList(),
            ),
          ),
        ),
        Divider(height: ScreenAdapter.height(1)),

        // 内容区域
        Expanded(
          child: Container(
            color: Colors.white,
            width: double.infinity,
            child: Obx(() {
              switch (controller.currentInterfaceInfoTabIndex.value) {
                case 1:
                  return _buildInterfaceInfoTab();
                case 2:
                  return _buildEditInterfaceTab();
                default:
                  return const Center(child: Text('页面加载中'));
              }
            }),
          ),
        ),
      ],
    );
  }
}
